<template>
  <div>
    <div class="container">
      <vxe-toolbar style="height: 100px;">
        <template #buttons>
          <el-row :gutter="20" type="flex" style="margin-bottom: 20px;">
            <el-col :span="4" style="display: flex;">
              <el-date-picker v-model="searchForm.year" value-format="yyyy" type="year" @change="changeYear"
                placeholder="选择年份">
              </el-date-picker>
            </el-col>
            <el-col :span="4" style="display: flex;">
              <el-select v-model="searchForm.orgIdStr" size="small" multiple collapse-tags filterable clearable
                placeholder="选择学校名称">
                <el-option :label="item.orgName" :value="item.orgId" v-for="(item,index) in orgData"
                  :key="index"></el-option>
              </el-select>
              <el-button type="success" size="small" @click="selectOrgAll">全选</el-button>
            </el-col>
            <el-col :span="4">
              <el-select v-model="searchForm.insuranceStatus" size="small" collapse-tags filterable clearable
                placeholder="购买保险情况">
                <el-option :label="item.value" :value="item.label" v-for="(item,key,index) in insuranceStatusList"
                  :key="index"></el-option>
              </el-select>
            </el-col>

            <el-col :span="5" style="display: flex;">
              <el-button type="success" size="small" icon="el-icon-s-promotion" @click="searchSubmit"
                style="margin: 0 10px;"> 搜索</el-button>
              <vxe-button @click="clearTableFilter" status="warning" icon="el-icon-refresh-right"> 清空</vxe-button>
            </el-col>
            <el-col :span="4">
              <vxe-input style="float: right;" v-model.trim.lazy="filterName" type="search" placeholder="快捷检索"
                @keyup="searchEvent"></vxe-input>
            </el-col>
          </el-row>
        </template>
      </vxe-toolbar>
      <vxe-table resizable ref="XTable" show-overflow border max-height="800" stripe highlight-hover-row
        highlight-current-row :loading="loading" :data="dataList">
        <vxe-table-column field="orgName" title="学校名称" sortable></vxe-table-column>
        <vxe-table-column field="legalPerson" title="法人代表" sortable></vxe-table-column>
        <vxe-table-column field="staticPhone" title="固定电话" sortable></vxe-table-column>
        <vxe-table-column field="startTime" title="向公众开放起始年份" sortable></vxe-table-column>
        <vxe-table-column field="acreage" title="场馆总面积(㎡)" sortable></vxe-table-column>
        <vxe-table-column field="openType" title="开放类型" sortable></vxe-table-column>
        <vxe-table-column field="dayTimeNum" title="日均开放时常" sortable></vxe-table-column>
        <vxe-table-colgroup title="经费投入">
          <vxe-table-column field="allPutMoney" title="累计投入" sortable></vxe-table-column>
          <vxe-table-colgroup title="上一年度投入经费(万元)">
            <vxe-table-column field="provlnceMoney" title="本省市财政补贴" sortable></vxe-table-column>
            <vxe-table-column field="schoolMoney" title="学校自筹" sortable></vxe-table-column>
            <vxe-table-column field="otherMoney" title="其他" sortable></vxe-table-column>
            <vxe-table-column field="totalMoney" title="合计" sortable></vxe-table-column>
          </vxe-table-colgroup>
        </vxe-table-colgroup>
        <vxe-table-column field="insuranceStatus" title="购买保险情况" sortable></vxe-table-column>
      </vxe-table>
      <vxe-pager :loading="loading" :current-page="page.pageNum" :page-size="page.pageSize" :total="page.totalResult"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
      </vxe-pager>
    </div>
  </div>
</template>

<script>
  import {
    sheet7_all_sheet_orgName,
    sheet7_base

  } from '@/api/statistics.js'
  import moment from 'moment';
  // import { match_level, match_kind, match_event, match_event_item, record_break } from '@/api/dict.js'
  export default {
    data() {
      return {
        doubleDate: '',
        defaultDataList: [],
        dataList: [],
        page: {
          pageNum: 1,
          pageSize: 10,
          totalResult: 0
        },
        loading: false,
        filterName: '',
        searchProps: [],
        dict_org: {},
        areaData: [],
        searchForm: {
          insuranceStatus: '',
          orgIdStr: [],
          year: moment().format("YYYY"),
          dependOrgType: '',
        },
        orgData: [],
        matchEventItemData: {},
        insuranceStatusList: [{
            label: 1,
            value: "公共责任险"
          },
          {
            label: 2,
            value: "人身意外伤害险"
          },
          {
            label: 3,
            value: "其他险种"
          },
          {
            label: 4,
            value: "没有购买"
          },
        ],

      }
    },
    created() {
      this.init_dict()
      this.getOrg4player(this.page)

    },
    methods: {
      searchSubmit() {
        let data = {}
        if (this.searchForm.orgIdStr.length != 0) data.orgIdList = this.searchForm.orgIdStr.join(',')
        if (this.searchForm.insuranceStatus) data.insuranceStatus = this.searchForm.insuranceStatus
        if (this.searchForm.year) data.year = this.searchForm.year


        data.pageNum = 1
        data.pageSize = this.page.pageSize
        sheet7_base(data).then(res => {
          if (res.code === 200 && res.data.dataList.length != 0) {
            this.page.totalResult = res.data.countNum
            this.init_data(res.data.dataList)
          } else {
            this.defaultDataList = []
            this.dataList = this.defaultDataList
          }
        }).then(() => {

        })
      },
      clearTableFilter() {
        this.searchForm = {
          areaId: '',
          orgIdStr: [],
          matchLevelStr: [],
          matchKindStr: [],
          matchEventId: '',

          skillTypeId: '',
          matchRank: '',
          startDate: '',
          endDate: '',
        }

        this.page.pageNum = 1,
          this.page.pageSize = 10,
          this.doubleDate = ''
        this.getOrg4player(this.page)
      },

      selectOrgAll() {
        this.searchForm.orgIdStr = []
        this.orgData.forEach(item => {
          this.searchForm.orgIdStr.push(item.orgId)
        })
      },
      areaChange(val) {
        this.orgData = []
        this.searchForm.orgIdStr = ''
        statistics_org4provence({ areaId: val }).then(res => {
          this.orgData = res.data
        })
      },
      getOrg4player() {
        let data = {}
        data.pageNum = this.page.pageNum
        data.pageSize = this.page.pageSize

        sheet7_base(data).then(res => {
          if (res.code === 200 && res.data.dataList.length != 0) {

            this.init_data(res.data.dataList)
            this.page.totalResult = Number(res.data.countNum)
          } else {
            this.defaultDataList = []
          }
        }).then(() => {
          // this.findList()
        })
      },
      init_data(data) {

        this.defaultDataList = data
        this.dataList = this.defaultDataList
        this.searchProps = Object.keys(data[0])
      },
      init_dict() {
        const data = {
          year: this.searchForm.year
        }
        sheet7_all_sheet_orgName().then(res => {
          this.orgData = res.data
        })
      },


      //根据时间来获取新的学校
      changeYear() {
        this.init_dict()
      },
      searchEvent() {
        const filterName = this.$XEUtils.toValueString(this.filterName).trim().toLowerCase()
        if (filterName) {
          const filterRE = new RegExp(filterName, 'gi')
          const searchProps = this.searchProps
          const rest = this.defaultDataList.filter(item => searchProps.some(key => this.$XEUtils
            .toValueString(item[
              key]).toLowerCase().indexOf(filterName) > -1))
          this.dataList = rest.map(row => {
            const item = Object.assign({}, row)
            searchProps.forEach(key => {
              item[key] = this.$XEUtils.toValueString(item[key]).replace(filterRE, match => match)
            })
            return item
          })
        } else {
          this.dataList = this.defaultDataList

          // this.findList()
        }
      },
      //分页
      handlePageChange({
        currentPage,
        pageSize
      }) {

        this.page.pageNum = currentPage
        this.page.pageSize = pageSize

        this.getOrg4player()
      },
      // sortChange() {
      //   this.page.pageSize = this.defaultDataList.length
      //   // this.findList()
      // },
      // findList() {
      //   this.loading = true
      //   setTimeout(() => {
      //     this.loading = false
      //     this.page.totalResult = this.defaultDataList.length
      //     this.dataList = this.defaultDataList.slice((this.page.currentPage - 1) * this.page
      //       .pageSize, this.page.currentPage * this.page.pageSize)
      //   }, 300)
      // },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 10px;
    background-color: #FFFFFF;
  }
</style>
